<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button icon="el-icon-plus" plain size="mini" type="primary" @click="handleAddWorkPlan">添加工作计划
        </el-button>
      </el-col>
      <right-toolbar @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="workPlanList">
      <el-table-column align="center" label="岗位名称" prop="postId">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.cld_project_post" :value="scope.row.postId" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="清洁性质" prop="cleanNature">
        <template slot-scope="scope">
          <dict-tag :options="cleanNatureOptions" :value="parseInt(scope.row.cleanNature)" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="工作日期">
        <template slot-scope="scope">
          {{ parseTime(scope.row.workStartDate, '{y}-{m}-{d}') }} ~
          {{ parseTime(scope.row.workEndDate, '{y}-{m}-{d}') }}
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
      @pagination="getList" />
    <div class="dialog-footer-options">
      <el-button @click="cancel">关 闭</el-button>
    </div>

    <el-dialog :close-on-click-modal="false" :visible.sync="open" append-to-body title="工作计划" width="60%">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="选择岗位" prop="postId">
              <el-select v-model="form.postId" placeholder="请选择">
                <el-option v-for="item in projectJobOptions" v-if="item.postId != 1" :key="item.postId"
                  :label="item.label" :value="item.postId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="清洁性质" prop="cleanNature">
              <el-select v-model="form.cleanNature" placeholder="请选择">
                <el-option v-for="item in cleanNatureOptions" :key="item.value" :label="item.label"
                  :value="parseInt(item.value)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button icon="el-icon-plus" plain size="mini" type="primary" @click="handleAddWorkPlanDetails">添加工作计划明细
            </el-button>
          </el-col>
        </el-row>
        <div v-for="(item, index) in form.detailsList" :key="item.workplanDetailsId">
          <el-row>
            <el-col v-if="form.cleanNature == 1" :span="8">
              <el-form-item :prop="'detailsList[' + index + '].workplanTime'" :rules="{
                required: true, message: '请选择', trigger: 'change'
              }" label="工作时间">
                <el-time-picker v-model="item.workplanTime" end-placeholder="结束时间" format='HH:mm:ss' is-range
                  range-separator="至" start-placeholder="开始时间" value-format='HH:mm:ss' @input="changeDate">
                </el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :prop="'detailsList[' + index + '].workplanScene'" :rules="{
                required: true, message: '请输入', trigger: 'blur'
              }" label="工作场景">
                <el-input v-model="item.workplanScene" placeholder="请输入">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :prop="'detailsList[' + index + '].cleanArea'" :rules="{
                required: true, message: '请输入', trigger: 'blur'
              }" label="清洁区域">
                <el-input v-model="item.cleanArea" placeholder="请输入">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col v-if="form.cleanNature == 2" :span="4">
              <el-form-item :prop="'detailsList[' + index + '].dateType'" :rules="{
                required: true, message: '请输入', trigger: 'blur'
              }" label="时间">
                <el-select v-model="item.dateType" placeholder="请选择">
                  <el-option :value="1" label="周">
                  </el-option>
                  <el-option :value="2" label="月">
                  </el-option>
                  <el-option :value="3" label="季">
                  </el-option>
                  <el-option :value="4" label="年">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="form.cleanNature == 2" :span="4">
              <el-form-item :prop="'detailsList[' + index + '].frequency'" :rules="{
                required: true, message: '请输入', trigger: 'blur'
              }" label="频次">
                <el-select v-model="item.frequency" placeholder="请选择">
                  <el-option label="1" value="1">
                  </el-option>
                  <el-option label="2" value="2">
                  </el-option>
                  <el-option label="3" value="3">
                  </el-option>
                  <el-option label="4" value="4">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :prop="'detailsList[' + index + '].workplanContent'" :rules="{
                required: true, message: '请输入', trigger: 'blur'
              }" label="工作内容">
                <el-input v-model="item.workplanContent" :rows="4" placeholder="请输入" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="padding-bottom:10px">
            <el-col :span="24">
              <el-button style="float: right;" v-if="!item.workplanDetailsId" size="small" type="danger"
                @click="handleRemove(item)">删除</el-button>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :visible.sync="viewOpen" append-to-body title="查看工作计划" width="50%">
      <el-table :data="form.detailsList">
        <el-table-column align="center" label="工作时间">
          <template slot-scope="scope">
            {{ scope.row.startTime }} - {{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="场景" prop="workplanScene" />
        <el-table-column align="center" label="清洁区域" prop="cleanArea" />
        <el-table-column align="center" label="工作内容" prop="workplanContent" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { selectJobStaffByProjectId } from '@/api/cld/publicCommon'
import {
  addWorkplan,
  delWorkplan,
  getCldWorkplanDetailsList,
  getWorkplan,
  listWorkplan,
  updateWorkplan
} from "@/api/cld/workplan";
import { cleanNatureOptions } from '@/assets/staticDict'

export default {
  name: "addWorkPlan",
  dicts: ['cld_project_post', 'cld_project_groups'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 工作计划
      workPlanList: [],
      form: {},
      open: false,
      viewOpen: false,
      // 项目id
      projectId: null,
      // 清洁性质
      cleanNatureOptions: cleanNatureOptions,
      // 表单校验
      rules: {
        postId: [
          { required: true, message: "请选择岗位", trigger: "change" }
        ],
        cleanNature: [
          { required: true, message: "清洁性质不能为空", trigger: "change" }
        ],
      },
      projectJobOptions: [],
      // 工作时间
      workplanTime: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: null
      },
      // 总条数
      total: 0,

    };
  },
  created() {
    const projectId = this.$route.params && this.$route.params.projectId;
    if (projectId) {
      this.queryParams.projectId = projectId;
      this.getList();
      this.handleGetPost();
    }
  },
  methods: {
    changeDate() {
      this.$forceUpdate()
    },
    // 查询工作计划
    getList() {
      this.loading = false;
      listWorkplan(this.queryParams).then(res => {
        this.loading = false;
        this.workPlanList = res.rows;
        this.total = res.total;
      })
    },
    // 查询岗位
    handleGetPost() {
      selectJobStaffByProjectId(this.queryParams.projectId).then(res => {
        this.projectJobOptions = res.data;
      })
    },
    // 取消按钮
    cancel() {
      this.$tab.closePage();
    },
    // 表单重置
    reset() {
      this.form = {
        workplanId: null,
        projectId: this.queryParams.projectId,
        postId: null,
        staffId: null,
        workDate: null,
        staffIds: [],
        detailsList: []
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAddWorkPlan() {
      this.reset();
      this.open = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const workplanId = row.workplanId || this.ids
      getWorkplan(workplanId).then(response => {
        this.form = response.data;
        this.form.detailsList.forEach(i => {
          i.workplanTime = [i.startTime, i.endTime];
        })

        console.log(this.form.detailsList)
        // this.workplanTime = [this.parseTime(arr[0]), this.parseTime(arr[1])];
        this.open = true;
      });
    },
    // 查看
    handleView(row) {
      this.reset();
      getCldWorkplanDetailsList(row.workplanId).then(res => {
        this.form.detailsList = res.data;
        this.viewOpen = true;
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.cleanNature == 1) {
            this.form.detailsList.forEach(i => {
              i.startTime = i.workplanTime[0];
              i.endTime = i.workplanTime[1];
            })
          }
          if (this.form.workplanId != null) {
            updateWorkplan(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addWorkplan(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const workplanIds = row.workplanId || this.ids;
      this.$modal.confirm('是否确认删除工作计划编号为"' + workplanIds + '"的数据项？').then(function () {
        return delWorkplan(workplanIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 新增工作计划明细
    handleAddWorkPlanDetails() {
      this.form.detailsList.push({
        flag: 1
      })
    },
    // 删除
    handleRemove(row) {
      const index = this.form.detailsList.indexOf(row);
      if (index > -1) {
        this.form.detailsList.splice(index, 1);
      }
    }
  }
};
</script>
<style scoped>
.el-select {
  width: 100%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
